.tooltip .tooltip_arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip[data-popper-placement^="top"] .tooltip_arrow {
  border-width: 5px 5px 0 5px;
  border-color: $tooltip-bg transparent transparent transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
  left: -5px !important;
}

.tooltip[data-popper-placement^="bottom"] .tooltip_arrow {
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent $tooltip-bg transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
  left: -5px !important;
}

.tooltip[data-popper-placement^="right"] .tooltip_arrow {
  border-width: 5px 5px 5px 0;
  border-color: transparent $tooltip-bg transparent transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
  top: -5px !important;
}

.tooltip[data-popper-placement^="left"] .tooltip_arrow {
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent $tooltip-bg;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
  top: -5px !important;
}

.fade-leave-active,
.fade-enter-active {
  transition: opacity 0.2s linear;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.tooltip {
  position: absolute;
}
